<template>
	<!-- 参考网站 https://blog.csdn.net/zxy19931069161/article/details/138718188  @touchend="handleTouchEnd"-->
	<view>
		<view class="titleBox">
			<image class="icon" @click="onLeft" src="@/static/img/Caleft.png"></image>
			<view class="title">{{ currentYear }}年{{ currentMonth }}月</view>
			<image class="icon" @click="onRight" src="@/static/img/Caright.png"></image>
		</view>

		<view class="week">
			<view v-for="(item, index) in week" :key="index">{{ item }}</view>
		</view>
		<!-- 日历 -->
		<view class="calendarbBox">
			<view class="singleDay" v-for="(item, index) in state.currentMonthAllDate" :key="index"
				@tap="selectedDate(item.date)">
				<!-- 不是当前月日期 class="dayTextB",如果选中则跳转至所属月份-->
				<text class="dayTextB" v-if="item.month != 'current'">{{ item.number }}</text>
				<!-- 没有选中当前日期class="dayText"，选中当前日期class="dayTextA"-->
				<text class="dayTextA"
					v-if="item.month == 'current' && String(state.TodayDate) == String(item.date)">{{ item.number }}</text>
				<text class="dayText"
					v-if="item.month == 'current' && String(state.TodayDate) != String(item.date)">{{ item.number }}</text>
				<!-- 当天有计划+当前日期没有选中的标志 -->
				<view class="point green" v-if="item.green"></view>
				<view class="point red" v-if="item.red"></view>

				<!-- 今天标识不变 -->
				<view class="xuanzhong" v-if="String(state.xuanzhong) == String(item.date)"></view>
				<!-- 选中的标志 -->
				<view class="jinTian" v-if="String(state.TodayDate) == String(item.date)"></view>

			</view>
		</view>

	</view>
</template>

<script setup>
	import { reactive, toRefs, computed, onMounted, ref } from 'vue';

	import { onLoad, onHide } from '@dcloudio/uni-app';
	import { defineEmits } from 'vue'

	const emit = defineEmits(['change'])

	function callParentMethod(date) {
		emit('change', { date })
	}


	const state = reactive({
		week: ['日', '一', '二', '三', '四', '五', '六'],
		currentYear: '',
		currentMonth: '',
		currentToday: '',
		// 0周日，1周一
		monthFirstDayCurrentWeek: '',
		monthFinallyDayCurrentWeek: '',
		//currentMonthAllDate里面是一个一个的对象 ，对象属性number当前日期，isPlan当天是否有计划，month是否是当前月里面的日期，因为要显示不同的样式。还以根据需要在添加其他属性。
		currentMonthAllDate: [],
		lastMonthDateNumber: 0,
		nextMonthDateNumber: 0,
		// showMonthOrWeek为true,代表显示周，false显示月
		showMonthOrWeek: false,
		currentTodayDate: '',
		initialX: '',
		currentMonthNum: '',
		TodayDate: '',
		xuanzhong: ''
	});
	const {
		currentMonthNum,
		initialX,
		currentTodayDate,
		showMonthOrWeek,
		lastMonthDateNumber,
		nextMonthDateNumber,
		currentMonthAllDate,
		week,
		currentMonth,
		currentYear,
		currentToday,
		monthFirstDayCurrentWeek,
		monthFinallyDayCurrentWeek,
		TodayDate,
		xuanzhong
	} = toRefs(state);

	// 今天凌晨
	state.TodayDate = new Date(new Date(new Date().toLocaleDateString()).getTime());
	console.log(state.TodayDate)
	state.currentTodayDate = new Date(new Date(new Date().toLocaleDateString()).getTime());


	let green = [new Date('2024/7/28'), new Date('2024/7/25'), new Date('2024/7/16')]
	let red = [new Date('2024/7/15'), new Date('2024/7/14'), new Date('2024/7/12')]
	green = green.map(x => x.getTime())
	red = red.map(x => x.getTime())
	const set_dian = () => {
		state.currentMonthAllDate.map((item) => {
			console.log(red, new Date(item.date).getTime())
			if (green.includes(new Date(item.date).getTime())) {
				item.green = true;
			}
			if (red.includes(new Date(item.date).getTime())) {
				item.red = true;
			}
		})
	}


	/**
	 * 记录手指触碰初始位置
	 */
	const handleTouchStart = (event) => {
		state.initialX = event.changedTouches[0].clientX;
	};

	/**
	 * 左右滑动事件
	 */


	const onLeft = () => {
		//往右滑动，上个月
		state.currentTodayDate = state.currentMonth == 1 ? new Date(`${state.currentYear - 1}/12/1`) : new Date(
			`${state.currentYear}/${state.currentMonthNum - 1}/1`);
		getAllDatesOfCurrentMonth(state.currentTodayDate);

		return;
	}
	const onRight = () => {
		//往右滑动，上个月
		state.currentTodayDate = state.currentMonth == 12 ? new Date(`${state.currentYear + 1}/1/1`) : new Date(
			`${state.currentYear}/${state.currentMonthNum + 1}/1`);
		getAllDatesOfCurrentMonth(state.currentTodayDate);
		return;
	}

	/**
	 * 选中哪天
	 */
	const selectedDate = (date) => {
		state.xuanzhong = date;
		callParentMethod(date)
		// state.currentTodayDate = date;
		// getAllDatesOfCurrentMonth(state.currentTodayDate);
		// 下面去后端请求计划数据，并展示
	};

	/**
	 * 得到当前月份/当前周的所有日期，dateData某天日期
	 */
	const getAllDatesOfCurrentMonth = (dateData) => {
		state.currentMonthAllDate = [];
		const today = new Date(dateData);
		state.currentToday = today;
		state.currentYear = today.getFullYear();
		state.currentMonthNum = today.getMonth() + 1;
		if (today.getMonth() + 1 < 10) {
			state.currentMonth = '0' + (today.getMonth() + 1);
		} else {
			state.currentMonth = today.getMonth() + 1;
		}
		// 上个月总天数
		const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
		state.lastMonthDateNumber = new Date(lastMonth.getFullYear(), lastMonth.getMonth() + 1, 0).getDate();
		// 下个月总天数
		const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
		state.nextMonthDateNumber = new Date(nextMonth.getFullYear(), nextMonth.getMonth() + 1, 0).getDate();
		const dates = [];
		// 用if,else判断显示周还是月
		if (state.showMonthOrWeek) {
			// 显示当前选中日期所在周
			let day = today.getDay();
			let startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - day);
			let endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - day + 6);
			let currentMonthTwo = today.getMonth() + 1;
			for (let i = startDate; i <= endDate;) {
				let monthFlag = '';
				if (new Date(i).getMonth() + 1 == currentMonthTwo) {
					monthFlag = 'current';
				} else if (new Date(i).getMonth() + 1 > currentMonthTwo) {
					monthFlag = 'last';
				} else {
					monthFlag = 'next';
				}
				dates.push(new Date(i));
				state.currentMonthAllDate.push({ number: i.getDate(), month: monthFlag, date: new Date(i) });
				i.setDate(i.getDate() + 1);
			}
		} else {
			// 显示当前选中日期所在月
			const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
			const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
			state.monthFirstDayCurrentWeek = firstDayOfMonth.getDay();
			state.monthFinallyDayCurrentWeek = lastDayOfMonth.getDay();
			// 补充上个月显示在本月的天数，例如5.1是周三，则周日周一周二显示上个月
			if (state.monthFirstDayCurrentWeek != 0) {
				// 判断上个月是不是上一年
				let isLastYearNumber = lastMonth.getMonth() + 1 == 12 ? 1 : 0;
				for (let i = 0; i < state.monthFirstDayCurrentWeek; i++) {
					state.currentMonthAllDate.push({
						number: state.lastMonthDateNumber - state.monthFirstDayCurrentWeek + 1,
						month: 'last',
						date: `${state.currentYear - isLastYearNumber}/${lastMonth.getMonth() + 1}/${state.lastMonthDateNumber - state.monthFirstDayCurrentWeek + 1}`
					});
					state.lastMonthDateNumber++;
				}
			}
			for (let i = firstDayOfMonth; i <= lastDayOfMonth;) {
				dates.push(new Date(i));
				state.currentMonthAllDate.push({ number: dates.length, month: 'current', date: new Date(i) });
				i.setDate(i.getDate() + 1);
			}
			if (state.monthFinallyDayCurrentWeek != 6) {
				// 判断下个月是不是下一年
				let yearNumber = nextMonth.getMonth() + 1 == 1 ? 1 : 0;
				for (let i = 0; i < 6 - state.monthFinallyDayCurrentWeek; i++) {
					state.currentMonthAllDate.push({
						number: i + 1,
						month: 'next',
						date: `${state.currentYear + yearNumber}/${nextMonth.getMonth() + 1}/${i + 1}`
					});
				}
			}
		}
		set_dian()
		return dates;
	};
	getAllDatesOfCurrentMonth(state.currentTodayDate);

	// 可删除，做了几个假数据，假装几天有计划的,isPlan为true代表当天有计划。
	console.log(state.currentMonthAllDate)
</script>

<style scoped lang="scss">
	.calendarbBox {
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		border: 1rpx solid #D7E2EB;
		border-top: 0;
		padding-bottom: 30rpx;

		.singleDay {
			width: calc(100%/7);
			height: 87rpx;
			line-height: 87rpx;
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			position: relative;

			.dayText {
				position: relative;
				z-index: 9;
			}

			.dayTextA {
				position: relative;
				z-index: 9;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
			}

			.dayTextB {
				position: relative;
				z-index: 9;
				color: #e1e1e1;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
			}

			.point {
				width: 12rpx;
				height: 12rpx;
				background-color: #00b498;
				position: absolute;
				top: 65rpx;
				left: 50%;
				transform: translate(-50%, 0);
				border-radius: 50%;

				&.green {
					background-color: #00b498;
				}

				&.red {
					background-color: #FF0000;
				}
			}

			.jinTian {
				width: 60rpx;
				height: 60rpx;
				background-color: #00b498;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.xuanzhong {
				width: 60rpx;
				height: 60rpx;
				background-color: #00b498;
				opacity: 0.2;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.pointA {
				width: 12rpx;
				height: 12rpx;
				background-color: #fff;
				position: absolute;
				top: 50%;
				left: calc(100%/14);
				transform: translate(-50%, 0);
				border-radius: 50%;
			}
		}
	}

	.transitionTime {
		transition: transform 0.5s;
	}



	.titleBox {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 90rpx;
		background-color: #F6F8FF;
		position: relative;
		padding: 24rpx 40rpx;
		border: 1rpx solid #D7E2EB;
		border-radius: 8rpx 8rpx 0rpx 0rpx;

		.icon {
			width: 44rpx;
			height: 44rpx;
			display: block;
		}

		.title {
			font-size: 33rpx;
			color: #002288;
			font-weight: bold;
		}
	}

	.week {
		width: 100%;
		font-size: 26rpx;
		color: #333333;
		font-weight: bold;
		text-align: left;
		align-items: center;
		display: flex;
		justify-content: space-around;
		height: 80rpx;
		background-color: #F6F8FF;
		border: 1rpx solid #D7E2EB;
		border-top: 0;
	}
</style>